<template>
  <div>
    <div
      style="
        width: 100%;
        height: 40px;
        margin-top: 13px;
        display: flex;
        align-items: center;
        justify-content: space-around;
      "
    >
      <div
        style="
        background-color: rgb(245, 245, 245);
          width: 300px;
          height: 35px;
          border-radius: 20px; 
          overflow: hidden;
          display: flex;
          align-items: center;
          justify-content: space-evenly;
        "
      >
        <img
          src="../../assets/search.png"
          alt=""
          style="width: 20px; height: 20px"
        />
        <input
          type="text"
          style="
            background-color: rgb(245, 245, 245);
            width: 250px;
            height: 25px;
          "
          v-model="ss"
          @input="sss"
        />
      </div>
      <div style="color: rgb(225, 225, 225)" @click="qu">取消</div>
    </div>
    <div v-if="as">
      <!-- 历史记录 -->
      <div
        style="
          width: 100%;
          margin-top: 20px;
          display: flex;
          flex-direction: column;
          align-items: center;
        "
      >
        <p style="margin-left: -300px; font-size: 17px">历史记录</p>
        <div
          style="
            width: 90%;
            height: 70%;
            margin-top: 10px;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: flex-start;
            align-items: center;
          "
        >
          <span
            style="
              padding: 2px 5px;
              border: 1px solid rgb(225, 225, 225);
              margin: 7px 5px 0 0;
              border-radius: 13px;
            "
            >项链</span
          >
          <span
            style="
              padding: 2px 5px;
              border: 1px solid rgb(225, 225, 225);
              margin: 7px 5px 0 0;
              border-radius: 13px;
            "
            >我爱复最快多久发货数量</span
          >
          <span
            style="
              padding: 2px 5px;
              border: 1px solid rgb(225, 225, 225);
              margin: 7px 5px 0 0;
              border-radius: 13px;
            "
            >是否机房环</span
          >
          <span
            style="
              padding: 2px 5px;
              border: 1px solid rgb(225, 225, 225);
              margin: 7px 5px 0 0;
              border-radius: 13px;
            "
            >看来士大</span
          >
          <span
            style="
              padding: 2px 5px;
              border: 1px solid rgb(225, 225, 225);
              margin: 7px 5px 0 0;
              border-radius: 13px;
            "
            >ferv</span
          >
          <!-- <span style="padding: 3px 5px; border: 1px solid;border-radius: 13px;">seger</span> -->
          <!-- <span style="padding: 3px 5px; border: 1px solid;border-radius: 13px;">sgsdg</span> -->
          <!-- <span style="padding: 3px 5px; border: 1px solid;border-radius: 13px;">sdgs</span> -->
          <!-- <span style="padding: 3px 5px; border: 1px solid;border-radius: 13px;">sdgre</span> -->
          <!-- <span style="padding: 3px 5px; border: 1px solid;border-radius: 13px;">wetgsdfg</span> -->
          <!-- <span style="padding: 3px 5px; border: 1px solid;border-radius: 13px;">setgw</span> -->
          <!-- <span style="padding: 3px 5px; border: 1px solid;border-radius: 13px;">12easwetgergasfsdfgsdgsdtg</span> -->
          <!-- <span style="padding: 3px 5px; border: 1px solid;border-radius: 13px;">sdgf</span> -->
          <span
            style="
              padding: 2px 3px;
              border: 1px solid rgb(225, 225, 225);
              border-radius: 13px;
            "
          >
            <img
              src="../../assets/zhankai.png"
              alt=""
              style="width: 25px; height: 10px"
            />
          </span>
        </div>
      </div>

      <!-- 猜你想搜 -->
      <div style="width: 100%; margin-top: 20px">
        <p
          style="
            font-size: 17px;
            margin: 10px 10px 10px 10px;
            display: flex;
            justify-content: space-between;
          "
        >
          <span> 猜你想搜</span> <span @click="chang1">换一换</span>
        </p>
        <div
          style="
            width: 90%;
            height: 80px;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
          "
        >
          <div>{{ this.a.content1 }}</div>
          <div>{{ this.a.content2 }}</div>
          <div>{{ this.a.content3 }}</div>
          <div>{{ this.a.content4 }}</div>
          <div>{{ this.a.content5 }}</div>
          <div>{{ this.a.content6 }}</div>
        </div>
      </div>
      <div style="width: 100%; width: 400px">
        <p style="font-size: 17px; margin-left: 10px">搜索发现</p>
        <ul>
          <li class="sp"><span> 拒绝打伞焦虑</span> <span>-</span></li>
          <li class="sp"><span> 拒绝打伞焦虑</span> <span>-</span></li>
          <li class="sp"><span> 拒绝打伞焦虑</span> <span>-</span></li>
          <li class="sp"><span> 拒绝打伞焦虑</span> <span>-</span></li>
          <li class="sp"><span> 拒绝打伞焦虑</span> <span>-</span></li>
          <li class="sp"><span> 拒绝打伞焦虑</span> <span>-</span></li>
          <li class="sp"><span> 拒绝打伞焦虑</span> <span>-</span></li>
          <li class="sp"><span> 拒绝打伞焦虑</span> <span>-</span></li>
          <li class="sp"><span> 拒绝打伞焦虑</span> <span>-</span></li>
          <li class="sp"><span> 拒绝打伞焦虑</span> <span>-</span></li>
        </ul>
      </div>
    </div>
    <div v-if="ssk" class="searchResult">
      <ul v-for="(item, index) in b" :key="index">
        <li @click="sp">{{ item.caption }}</li>
      </ul>
    </div>
  </div>
</template>
  
  <script>
import { change, search } from "@/api/mint";
// import e from "express";
export default {
  data() {
    return {
      a: [],
      aa: 1,
      ss: "",
      as: true,
      b: [],
      ssk: false,
    };
  },
  methods: {
    qu() {
      this.$router.go(-1);
    },
    chang() {
      change({
        uid: 1,
      }).then((res) => {
        console.log(res);
        this.a = res.result[0];
        console.log(this.a);
      });
    },
    chang1() {
      change({
        uid: 1,
      }).then((res) => {
        console.log(res);
        if (this.aa == 1) {
          this.a = res.result[0];
          this.aa = 2;
        } else if (this.aa == 2) {
          this.a = res.result[1];
          this.aa = 1;
        }
      });
    },
    // 搜索框
    sss() {
      if (this.ss !== "") {
        this.as = false;
        this.ssk = true;
        search({
          caption: this.ss,
        }).then((res) => {
          console.log(res);
          this.b = res.data;
        });
      } else {
        this.as = true;
        this.ssk = false;
      }
    },
      sp() {
        console.log(1234);
      this.$router.push('/index_sear')
    }
  },
  mounted() {
    this.chang();
  },
};
</script>
  
  <style scoped>
* {
  padding: 0;
  margin: 0;
}
.searchResult {
  height: 93vh;
  color: darkgrey;
  background: rgb(238, 238, 238);
}
li {
  margin-left: -17px;
  padding-left: 20px;
  margin-bottom: -5px;
  border-bottom: 1px solid rgb(207, 207, 207);
  /* width: 340px; */
  background: white !important;
}
.sp {
  width: 300px;
  height: 45px;
  padding-left: 10px;
  border-bottom: 1px solid rgb(207, 207, 207);
  display: flex;
  justify-content: space-between;
}
ul {
  margin-top: 5px;
  /* list-style: none; */
  margin-left: 20px;
  line-height: 45px;
}
ul li {
  /* list-style-type: none; */
  /* list-style-image: url(../../assets/re.png); */
}
input {
  border: 0px;
}

input[type="text"]:focus {
  outline: none;
  background-color: rgb(240, 240, 240);
}
</style>
  